<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>猜数字游戏</h1>
      <div class="input-group">
        <label for="guess">请猜一个1~100的整数：</label>
        <input type="text" id="guess" />
        <button id="submit">提交</button>
      </div>
      <div class="result"></div>
      <div class="message"></div>
      <button id="play-again" class="play-again" style="display: none">
        再玩一次
      </button>
    </div>

    <script>
      // 生成随机数（1~100之间）
      var answer = Math.floor(Math.random() * 100) + 1;

      // 获取页面元素
      var input = document.getElementById("guess");
      var submitBtn = document.getElementById("submit");
      var result = document.querySelector(".result");
      var message = document.querySelector(".message");
      var playAgainBtn = document.getElementById("play-again");

      // 处理提交事件
      submitBtn.addEventListener("click", function () {
        // 获取用户输入的数字
        var guess = parseInt(input.value);

        // 验证用户输入的数字是否合法
        if (isNaN(guess) || guess < 1 || guess > 100) {
          result.textContent = "";
          message.textContent = "请输入1~100之间的整数！";
          return;
        }

        // 比较用户输入的数字和答案
        if (guess === answer) {
          result.textContent = "恭喜你，猜对了！";
          message.textContent = "";
          playAgainBtn.style.display = "block";
          submitBtn.disabled = true;
        } else if (guess < answer) {
          result.textContent = "";
          message.textContent = "太小了，请继续猜！";
        } else {
          result.textContent = "";
          message.textContent = "太大了，请继续猜！";
        }
      });

      // 处理再玩一次事件
      playAgainBtn.addEventListener("click", function () {
        // 重新生成随机数
        answer = Math.floor(Math.random() * 100) + 1;

        // 清空输入框和提示信息
        input.value = "";
        result.textContent = "";
        message.textContent = "";

        // 隐藏再玩一次按钮，启用提交按钮
        playAgainBtn.style.display = "none";
        submitBtn.disabled = false;
      });
    </script>
  </body>
</html>
